<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domap</title>
    <!-- 引用 -->


    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

    <!-- 引入封装的请求 -->
    <script src="./03-ajax的封装.js"></script>

    <link rel="stylesheet" href="./head.css">

    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .father {
            display: flex;
            background-position: center top;
        }
        
        .son {
            width: 420px;
            height: 340px;
            /* text-align: center; */
            line-height: 40px;
            color: aliceblue;
            background-color: rgb(42, 105, 176);
            margin: 5px;
            /* position: relative; */
            padding-left: 35px;
        }
        
        .huan {
            width: 100%;
            /* height: 120%; */
            background-color: rgb(13, 33, 51);
            margin-left: -15px;
        }
        
        #huan1 {
            width: 33%;
            height: 100px;
            background-color: rgb(13, 33, 51);
            float: left;
        }
        
        #huan2 {
            width: 33%;
            height: 100px;
            background-color: rgb(13, 33, 51);
            float: left;
        }
        
        #huan3 {
            width: 33%;
            height: 100px;
            background-color: rgb(13, 33, 51);
            float: left;
        }
        
        .kuang {
            width: 150px;
            height: 100px;
            background-color: #082c4e;
        }
        
        .sankuang {
            display: flex;
        }
        
        .kuangzhy {
            width: 150px;
            height: 100px;
        }
        
        .san1 {
            width: 450px;
            height: 400px;
        }
        
        video {
            width: 600px;
            object-fit: contain;
            overflow: clip;
            position: relative;
            top: -298px;
            left: 405px;
        }
        /* 弹性盒子father */
        
        .zhy {
            width: 395px;
            height: 248px;
            /* text-align: center; */
            padding: 20px;
            line-height: 40px;
            color: aliceblue;
            background-color: rgb(13, 33, 51);
            margin: 5px;
            position: relative;
            left: -25px;
            /* top: -301px; */
        }
        
        .Zhy {
            width: 360px;
            height: 160px;
            /* text-align: center; */
            padding: 20px;
            line-height: 15px;
            color: #d6dce2;
            background-color: #082c4e;
            margin: 5px;
            position: relative;
            left: -8px;
            /* top: 290px; */
        }
        
        .wen0 {
            width: 50px;
            height: 20px;
            background-color: #cccccc;
            text-align: center;
            line-height: 20px;
            font-size: small;
            color: #ffffff;
            position: relative;
            left: 280px;
            top: -18px;
        }
        
        .wen {
            font-size: smaller;
            line-height: 20px;
            position: relative;
            top: -20px;
        }
        /* div {
            width: 150px;
            height: 150px;
        } */
    </style>
    <!-- 1.引入 echarts.js  -->
    <script src="./echarts.js"></script>
</head>
<!-- 2.为图标准备一块空间 -->

<body>

    <!-- 创建地图容器元素 -->


    <div class="up">
        <!-- 排水管网GIS综合应用系统
        在地图之上，导航栏之下
        -->
        <div class="title">
            <div class="title1">排水管网GIS综合应用系统</div>
        </div>

        <!-- 导航 -->
        <div class="nav">
            <header>

                <ul class="ul_left">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">地图操作</a></li>
                    <li><a href="#">管网查询</a></li>
                    <li><a href="#">管网统计</a></li>
                    <li><a href="#">巡检查询</a></li>
                    <li><a href="#">抢修维护</a></li>

                </ul>

                <ul class="right_right">
                    <li>
                        <a href="#" class="iconfont icon-ai-out"></a>
                    </li>
                    <li><a href="#" class="iconfont icon-user">admin</a></li>
                    <li>
                        <a href="#" class="iconfont icon-shezhixitongshezhigongnengshezhishuxing">
                        </a>
                    </li>


                </ul>

                <ul class="ul_right">
                    <li><a href="#">图档管理</a></li>
                    <li><a href="#">企业管理</a></li>
                    <li><a href="#">窖井管理</a></li>
                    <li><a href="#">泵站管理</a></li>
                </ul>



            </header>

        </div>





        <!-- 功能 -->
        <!-- <div class="func"> -->

        <div class="father">

            <div class="son">抢修养护计划
                <div class="huan">
                    <div id="huan1"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan1');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'blue' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '总计划',
                                    }],
                                    title: {
                                        show: true,
                                        fontSize: 14,
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>
                    <div id="huan2"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan2');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'green' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '待执行'
                                    }],
                                    title: {
                                        show: true,
                                        fontSize: 14
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>
                    <div id="huan3"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan3');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'orange' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '待确认'
                                    }],
                                    title: {
                                        show: true,
                                        fontSize: 14
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>

                </div>
                <!-- 三圆环 -->
                <div class="kuang">
                    <!-- <form action="./02 表格.html"> -->
                    <div class="sankuang">
                        <form action="">
                            <!-- action 提交之后跳转到的页面 -->
                            <!-- form为表单域 -->
                            <!-- 表单控件 -->
                            <!-- input 输入框 -->
                            <!-- type 输入框类型 -->
                            <!--  -->
                            <p>状态：<select name="是否提交">
                    <!-- select 为选择控件-->
                   
                    <option value="状态" selected>状态</option>
                    <!-- selected为默认选中 -->
                    <option value="提交">提交</option>
                    <option value="未提交">未提交</option>
                </select> </p>
                            <!-- <p>自我介绍：<textarea cols="30" rows="10" name="self"></textarea></p> -->
                            <!-- textarea文本域 -->
                            <!-- <p><input type="submit"> <input type="reset"> <input type="button" value="普通按钮"></p> -->

                        </form>
                        <!-- <form action="./02 表格.html"> -->
                        <form action="">
                            <p>状态：<select name="是否提交">
                        <!-- select 为选择控件-->                      
                        <option value="状态" selected>状态</option>
                        <!-- selected为默认选中 -->
                        <option value="提交">提交</option>
                        <option value="未提交">未提交</option>
                    </select> </p>
                            p><input type="submit"> <input type="reset"> <input type="button" value="普通按钮"></p> -->

                        </form>
                    </div>
                </div>

                <!-- 三方框 -->
                <div class="kuangzhy"></div>
                <!-- zhy表格 -->
            </div>
            <div class="son">抢修养护计划详情
                <div class="zhy">
                    <div class="Zhy">zhy
                        <div class="wen0">未提交</div>
                        <div class="wen">抢修养护计划编号:006</div>
                        <div class="wen">任务类型：管线计划</div>
                        <div class="wen">抢修养护事项</div>
                        <div class="wen">抢修养护开始时间:2023/10/27</div>
                        <div class="wen">抢修养护结束时间:2023/10/31</div>
                        <div class="wen">抢修养护人:huajintesttest1wisdom
                            <hr>
                        </div>
                        <div class="wen">抢修养护点</div>

                    </div>
                </div>
                <div class="son1">
                    <video src="../img/视频.mp4" controls autoplay muted></video>
                </div>
            </div>
            <!-- 弹性盒子2 father-->


        </div>

























        <!-- **************************************************************************************** -->

        <!-- </div> -->
    </div>

    <div id="container"></div>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=BYk8kz23QcnOo5r20LQFGqXqGibcInRa"></script>

    <script>
        var map = new BMapGL.Map("container"); // 创建地图实例 
        // var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
        var point = new BMapGL.Point(114.1629, 34.6168);
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setHeading(64.5); //设置地图旋转角度
        map.setTilt(73); //设置地图的倾斜角度


        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);
    </script>

</body>

</html>